<template>
	<view class="main" :style="allStyle()">
		<view class="noSearch" v-show="ddzlList.length==0">
			<div style="height: 100px;"></div>
			<view class="a" v-show="!isOk">
				<div style="height: 100px;"></div>
				<u-loading-icon mode="circle" size="50px"></u-loading-icon>
			</view>
			<view class="b" v-show="isOk">
				<view class="ccccccc" v-show="!notQx">
					<u-empty mode="search" text="暂无数据"></u-empty>
				</view>
				<view class="ddddddd" v-show="notQx">
					<u-empty mode="page" text="加载失败"></u-empty>
				</view>
			</view>
		</view>
		<view class="yes" v-if="ddzlList.length!=0" :style="getHeight()">

			<u-list :lowerThreshold="10" @scrolltolower="scrolltolowerX()">
				<u-list-item v-for="(item,index) in ddzlList" :key="index" style="background-color: #FFFFFF;">
					<u-line></u-line>
					<view class="tab" style="display: flex;flex-direction: column;padding: 16px 16px;">
						<view class="top" style="display: flex;justify-content: space-between;padding-bottom: 5px;">
							<view class="titleMain" style="font-size: 18px;font-weight: 1000;">{{item.zlmc}}</view>
							<view class="tag" :style="getColor(item.fkzt)">{{item.fkzt}}</view>
						</view>
						<view class="content" style="font-size: 16px;color: #303133;padding-bottom: 5px;">{{item.zlnr}}
						</view>
						<view class="bottom" style="display: flex;justify-content: space-between;align-items: center;">
							<view class="left">
								<view class="a" style="display: flex;align-items:center;">
									<u-icon name="account" color="#999999" size="18"></u-icon>
									<view class="titleBot" style="color: #606266;font-size: 14px;padding-left: 5px;">
										{{item.jsrxm}}</view>
								</view>
								<view class="b" style="display: flex;align-items: center;">
									<u-icon name="clock" color="#999999" size="15"></u-icon>
									<view class="titleBot" style="color: #606266;font-size: 14px;padding-left: 5px;">
										{{item.createdTime}}</view>
								</view>
							</view>
							<view class="right">
								<u-button v-show="item.fkzt=='未反馈'" @click="jumpToSet(item)" text="反 馈" color="#FF5000"
									style="height: 32px;width: 75px;"></u-button>
								<u-button v-show="item.fkzt=='已反馈'" @click="jumpToDetail(item)" text="详 情"
									style="height: 32px;width: 75px;"></u-button>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>

	</view>
</template>

<script>
	import croods from '@/common/croods-1.3.3.js';
	window.croods = croods;
	window.hydra = require('../../../common/wst_hydra-1.0.0.js');


	import coordtransform from 'coordtransform';
	import {
		getDateDic,
		getDdzlList
	} from '@/common/api.js'
	export default {
		onShow() {
			document.body.style.overflow = 'auto';
			this.isOk = false
			this.notQx = false
			this.getDic()
			this.getData()
		},
		data() {
			return {
				/* 字典 */
				dic: {
					status: 'Enabled',
					type: 'ORDER_FKZT'
				},
				dicList: [],
				/* 请求数据 */
				pageNum: 1,
				pageSize: 10,
				isOver: false,
				/* 返回结果 */
				ddzlList: [],
				isOk: false,
				notQx: false,

			}
		},
		methods: {
			getDic() {
				getDateDic(this.dic).then(res => {
					this.dicList = res
				})
			},
			async getData() {
				await getDdzlList({
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					if ("msgCode" in res && (res.msgCode == "1003" || res.msgCode == "-401")) {
						this.notQx = true
					} else {
						this.isOver = res.nextPage == 0
						const data = res.list.map(item => {
							const dateTemp = this.dicList.find(date => date.code === item.fkzt);
							if (dateTemp) {
								item.fkzt = dateTemp.name;
							}
							return item;
						});
						if (this.ddzlList.length == 0) {
							this.ddzlList = data
						} else {
							data.forEach(temp => {
								let ishaving = this.ddzlList.find(zoo => zoo.id == temp.id)
								if (ishaving) {
									if (ishaving.fkzt != temp.fkzt) {
										let index = this.ddzlList.findIndex(test => test.id ===
											ishaving.id);
										if (index !== -1) {
											this.ddzlList.splice(index, 1, temp);
										}
									}
								} else {
									this.ddzlList.push(temp)
								}
							})
						}
					}
					this.isOk = true
					/* console.log(this.ddzlList); */
				}).catch(err => {
					this.notQx = true
					this.isOk = true
				})
			},

			/* 触底加载 */
			scrolltolowerX() {
				if (this.isOver) {
					return
				} else {
					this.pageNum += 1
					this.getData()
				}
			},

			/* 页面跳转 */
			jumpToSet(item) {
				uni.navigateTo({
					url: `/pages/me/ddzl/fk/index?id=${item.id}&title=${item.zlmc}`
				})
			},
			jumpToDetail(item) {
				uni.navigateTo({
					url: `/pages/me/ddzl/xq/index?id=${item.id}&title=${item.zlmc}`
				})
			},

			/* 样式 */
			allStyle() {
				let height = uni.getSystemInfoSync().windowHeight
				return {
					'height': height,
					'width': '100%',
					'display': 'flex',
					'flex-direction': 'column',
					'background-color': '#FAFAFA'
				}
			},
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight - 10
				return {
					'height': height,
					'width': '100%',
					'display': 'flex',
					'flex-direction': 'column',
					'background-color': '#FAFAFA'
				}
			},
			getColor(fkzt) {
				if (fkzt == '未反馈') {
					return {
						'color': '#FF5000',
						'font-size': '15px'
					}
				} else if (fkzt == '已反馈') {
					return {
						'color': '#3DAC76',
						'font-size': '15px'
					}
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.isOk = false
				this.getDic();
				this.getData();
			});
		}

	}
</script>

<style>
</style>